// const root = document.getElementById("root");
// const tag = document.createElement("div");
// tag.textContent = "app"
//
// // tag.createNode = "app";
// root.appendChild(tag);
//
//react VMDOM

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children,
    },
  };
}

function createNodeText(nodeValue) {
  return {
    type: "ELEMENT_TEXT",
    props: {
      nodeValue,
      children: [],

    },
  };
}

function render(el, container) {
  const dom =
    el.type === "ELEMENT_TEXT"
      ? document.createTextNode("")
      : document.createElement(el.type);
  Object.keys(el.props).forEach((key) => {
    if (key !== "children") {
      dom[key] = el.props[key];
    }
  });
  const children = el.props.children;
  children.forEach((child) => {
    render(child, dom);
  });
  container.append(dom);
}


// function render(co, container) {}
const container = document.querySelector("#root");
const App = createElement("div", { id: "app" }, createNodeText("app"));
render(App, container);
